<template>
  <div class="container">
    <!-- bg -->
    <div class="page-bg" :class="isFoucs ? 'filter-bg' : ''">
      <img :src="bgSrc" alt="">
    </div>
    <!-- header -->
    <header class="header">
      <div class="header-left">
        <button class="menu-btn" @click="showModal = true">
          <img class="menu-icon" src="../assets/imgs/menu.png" />
        </button>
      </div>
      <div class="header-right">
        <button class="seetting-btn" v-if="showPlayerSymbol" @click="togglePlayer">
          <img class="setting-icon" :class="isPlaying ? 'rotate-it' : ''" src="../assets/imgs/music.svg" />
        </button>
      </div>
    </header>

    <main class="main">
      
      <!-- search -->
      <search-input
        :placeholder="dailyWordInfo.hitokoto"
        @getIsFoucs="getIsFoucs"
      />
      <!-- nav -->
      <transition name="bounce">
        <div v-show="viewConfig.showSite" class="nav-wrapper">
          <!-- mobile -->
          <mobile-nav></mobile-nav>
          <!-- pc -->
          <div class="nav-content">

          <a-row :gutter="[10, 10]" class="content-row" type="flex">
            <transition-group name="list-complete">

                <a-col :key="item.title" class="site-col" v-for="(item) in navsList" :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                  <div class="nav-cate" :style="{ opacity: isFoucs ? '0.6' : '1' }">
                    <span class="nav-cate-title">{{ item.title }}</span>

                    <a-row :gutter="[5, 5]" class="nav-cate-list">
                      <a-col :key="el.href" v-for="(el) in item.children" :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                        <a class="nav-item" :href="el.href" target="_blank">
                          <span>{{ el.name }}</span>
                        </a>
                      </a-col>
                    </a-row>

                  </div>
                </a-col>

            </transition-group>
          </a-row>
        </div>
        </div>
      </transition>
      <solar-term v-if="viewConfig.showSolarTerm" />
    </main>

    <!-- footer -->
    <footer class="footer">
      <span class="rights">Laine @2020 All Rights Reserved .</span>
    </footer>

    <!--  setting-modal  -->
    <a-drawer
      :visible="showModal"
      @close="showModal = false"
      placement="top"
      :mask="true"
      wrapClassName="setting-drawer"
      height="140px"
    >
      <div style="padding-left: 6rem">
        <a-row :gutter="[10, 10]" type="flex">
          <a-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
            <span>显示网站</span>
            <a-switch v-model="viewConfig.showSite" @change="onSiteSwitchChange"></a-switch>
          </a-col>
          <a-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
            <span>显示节气</span>
            <a-switch v-model="viewConfig.showSolarTerm" @change="onSolarChange"></a-switch>
          </a-col>
          <a-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
            <show-button @click="reOrderNavsList">排序</show-button>
          </a-col>
          <a-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
            <show-button @click="getRandomWrapper">随机壁纸</show-button>
          </a-col>
        </a-row>
      </div>
    </a-drawer>

    <div id="player" style="visibility: hidden"></div>
  </div>
</template>

<script>
import axios from 'axios'
import SolarTerm from '../components/SolarTerm'
import SearchInput from '../components/SearchInput'
import ShowButton from '../components/ShowButton'
import MobileNav from '../components/MobileNav'

import list from '../static/nav.json'
let navs = []
for (const key in list) {
  navs.push({
    title: list[key][0].title,
    children: list[key].filter(e =>  e.title === list[key][0].title)
  })
}
export default {
  components: { SolarTerm, SearchInput, ShowButton, MobileNav },
  async asyncData(ctx) {
    const { data } = await axios.get('https://v1.hitokoto.cn?c=j&c=i&c=d&c=c&c=h&c=k')
    // const res = await axios.get('https://cn.bing.com/HPImageArchive.aspx?format=js&idx=1&n=1&mkt=zh-CN')
    // console.log(res.data.images[0].url.split('&')[0].split('id=')[1])

    return {
      dailyWordInfo: data || { hitokoto: ' ' }
    }
  },
  data() {
    return {
      bgSrc: require('../assets/imgs/bg3.webp'),
      bgSrcList: [
        require('../assets/imgs/bg1.jpg'),
        require('../assets/imgs/bg2.jpg'),
        require('../assets/imgs/bg3.webp'),
        require('../assets/imgs/bg4.jpg'),
        require('../assets/imgs/bg5.jpg'),
      ],
      navsList: JSON.parse(JSON.stringify(navs)),
      isFoucs: false,
      /**
       * 显示显示配置
       * 是否显示card及里面的网站
       * 是否显示网站logo
       * 更换背景图
       */
      viewConfig: {
        showSite: true,
        showSolarTerm: true,
        addColor: false
      },
      showModal: false,

      colorList: [
        '#009394','#006270','#248bd6','#0f6bae','#725a7a','#c56c86',
        '#ffab40','#767894','#ff75b2','#6f88fc','#5b7fa7','#43506c',
        '#3d6198','#7c9aab','#b4d1e1','#abbcda','#425d8a','#f7d7c8'
      ],

      /**
       * 播放器实例
       * 是否显示音符
       * 是否在播放
       */
      aPlayerInstance: null,
      showPlayerSymbol: false,
      isPlaying: false
    }
  },
  mounted() {
    this.getViewConfig()
    const randomNum = this.getRandom()
    if (randomNum >= 6) {
      this.$confirm({
        title: '嗨',
        content: '来首音乐吗？',
        cancelText: '不用了',
        okText: '好的',
        onOk: () => {
          this.initPlayer()
        },
        onCancel() {
          console.log('qnmd')
        }
      })
    }
  },
  methods: {
    // 获取input是否foucs
    getIsFoucs(isFoucs) {
      this.isFoucs = isFoucs
    },
    // 获取页面配置
    getViewConfig() {
      let conf = localStorage.getItem('viewConfig')
      if (conf === null) return

      if (conf) {
        conf = JSON.parse(conf)
      }
      this.viewConfig = {
        showSite: conf?.showSite,
        showSolarTerm: conf.showSolarTerm
      }
    },
    // 是否显示切换
    onSiteSwitchChange(e) {
      this.viewConfig.showSite = e
      localStorage.setItem('viewConfig', JSON.stringify(this.viewConfig))
    },
    // 排序切换
    reOrderNavsList() {
      this.navsList = this.shuffle(JSON.parse(JSON.stringify(this.navsList)))
    },
    // 获取必应随机壁纸
    async getRandomWrapper() {
      // https://blog.csdn.net/m0_37682004/article/details/82314055
      // https://cn.bing.com/HPImageArchive.aspx?format=js&idx=1&n=1&mkt=zh-CN
      const i = this.getRandom(4)
      this.bgSrc = this.bgSrcList[i]
    },
    // 是否显示切换
    onSolarChange(e) {
      this.viewConfig.showSolarTerm = e
      localStorage.setItem('viewConfig', JSON.stringify(this.viewConfig))
    },
    // 打乱数组顺序方法
    shuffle(arr) {
      let m = arr.length;
      while(m > 1) {
        let index = Math.floor(Math.random() * m--);//交换的索引
        [arr[m], arr[index]] = [arr[index], arr[m]] //交换数据
      }
      return arr;
    },
    // 获取0-10随机数
    getRandom(n = 10) {
      return Math.round(Math.random()*n)
    },
    // 初始化播放器
    initPlayer() {
      this.aPlayerInstance = new APlayer({
        container: document.getElementById('player'),
        autoplay: true,
        fixed: true,
        theme: '#8aacea',
        mini: true,
        audio: [
          {
            name: 'The Armstrongs',
            artist: 'Justin Hurwitz',
            autoplay: true,
            url: 'https://music.163.com/song/media/outer/url?id=1318881224.mp3',
            cover: 'http://p1.music.126.net/Iv3XjCXselTyoLNom1Xqbg==/109951164724856271.jpg?param=130y130'
          }
        ]
      })
      this.showPlayerSymbol = true
      this.isPlaying = true
    },
    // 点击音符事件
    togglePlayer() {
      this.isPlaying = !!this.aPlayerInstance.paused
      this.aPlayerInstance.toggle()
    }
  }
}
</script>

<style lang="less">
.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-bg {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    transform: scale(1.1);
    &.filter-bg {
      filter: blur(4px);
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.2s;
    }
  }
  // 头部
  .header {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 5rem;
    .header-left {
      .menu-btn {
        .menu-icon {
          width: 22px;
          height: 22px;
          cursor: pointer;
          transition: transform .46s;
          &:hover {
            transform: rotate(180deg);
          }
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
    .header-right {
      .setting-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: transform 0.66s;
        &:active {
          opacity: 0.8;
        }
        &.rotate-it {
          animation: rotation 3s linear infinite;
        }
        @keyframes rotation {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}
.footer {
  display: flex;
  box-sizing: border-box;
  height: 24px;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #a2bdd885;
  font-size: 12px;
}
// 一言
.daily-word {
  color: #d9e5f1d1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // margin-top: 80px;
}
// navlist
.nav-wrapper {
  margin-top: 60px;
  width: 100%;
  .nav-content {
    width: 76%;
    margin: 0 auto;
    /*background: rgba(255,255,255,0.9);*/
    min-height: 200px;
    max-height: calc(100vh - 416px);
    overflow-y: auto;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    .content-row {
      .site-col {
        transition: all 0.66s;
        .nav-cate {
          background: rgba(255,255,255,0.78);
          transition: all .32s cubic-bezier(.645,.045,.355,1);
          padding: 15px;
          border-radius: 10px;
          min-height: 120px;
          .nav-cate-title {
            font-weight: bold;
            color: #333333;
            line-height: 28px;
          }
          .nav-cate-list {
            display: flex;
            flex-wrap: wrap;
            .nav-item {
              display: flex;
              /*border: 0.1px solid #b7c9ecbd;*/
              color: #333333;
              padding: 5px;
              box-sizing: border-box;
              border-radius: 6px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              transition: all .32s cubic-bezier(.645,.045,.355,1);
              &:hover {
                box-shadow: 0 6px 16px -8px rgba(0,0,0,.08),
                0 9px 28px 0 rgba(0,0,0,.05),
                0 12px 48px 16px rgba(0,0,0,.03);
              }
              .site-logo {
                display: inline-block;
                width: 16px;
                height: 16px;
                position: relative;
                top: 2px;
                margin-right: 4px;
                transition: all 0.26s;
              }
            }
          }
        }
      }
    }
  }
}
.setting-drawer {
  .ant-drawer-content {
    background-color: rgba(255,255,255,0.6);
  }
}
@media screen and (max-width: 520px) {
  .nav-content,
  .menu-btn {
    display: none !important;
  }
}
</style>
